{{#>base title=data.page.echarts_map}}

{{#*inline "pageContent"}}

    <div class="row">
        <div class="col-md-12">
            <h3 class="page-title">
                {{data.page.echarts_map}}
            </h3>

            <div class="tabs-wrap">
                <ul  class="nav nav-tabs">

                    <li>
                        <a href="echarts-map-world.html" >世界</a>
                    </li>
                    <li >
                        <a href="echarts-map-china.html" >中国</a>
                    </li>
                    <li class="active">
                        <a href="echarts-map-china-city.html" >中国-城市</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- BEGIN PAGE CONTENT-->
    <div class="row">
        <div class="col-md-12">

            <div class="portlet box default">

                <div class="portlet-body">
                    <div  class="chart-default " >
                        <div class="chart-body chart-map" id="my_chart"></div>
                    </div>

                </div>

            </div>

        </div>

    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="markdown">
                <h3>Javascript</h3>
<pre><code class="javascript">require('../../plugins/echarts/module');

var chart = $p.echarts("my_chart", {
    type: "map",
    title: {
        text: "浏览量（PV）地域分布图 - 中国"
    }
});

chart.load({
    name: "pv",
    mapType: "china",
    data: [{
        value: 234,
        name: 'Sichuan'
    }, {
        value: 400,
        name: 'Chengdu'
    }, {
        value: 500,
        name: '浙江'
    }, {
        value: 300,
        name: '杭州市'
    }, {
        value: 200,
        name: '宁波市'
    }]
});

//添加地图的选择事件
chart.on(echarts.config.EVENT.MAP_SELECTED, function(param) {
    chart.onMapSelectedByChina(param);
});</code></pre>

                {{>fixtures/echarts-footer}}

            </div>
        </div>
    </div>
    <!-- END PAGE CONTENT-->
{{/inline}}

{{#*inline "appScript"}}
    <script type="text/javascript">

        pagurian.call([
            "modules/echarts-map/app",
            "plugins/echarts/loader-map"
        ], function(app) {
            app.page.city();
        });

    </script>
{{/inline}}

{{/base}}
